<template>
	<view class="content">
    <view class="mine">
      <view class="titleMine">
        <view class="avatar">
          <u-image src="@/static/userimg.png" :lazy-load="true" width="150rpx" height="150rpx"></u-image>
          <!-- <image :lazy-load="true" src="@/static/userimg.png" alt="" /> -->
        </view>
        <view class="userName">{{ messageObj.userName }}</view>
      </view>
      <view class="outSideBox">
        <view class="name">
          <view>用户名：</view>
          <view>{{ messageObj.userName }}</view>
        </view>
        <view class="gender">
          <view>角色名：</view>
          <view>{{ messageObj.name }}</view>
        </view>
        <view class="information">
          <view>电话：</view>
          <view>{{ messageObj.phone | setPhone}}</view>
        </view>
        <view class="information">
          <view>创建时间：</view>
          <view>{{ messageObj.updateTime | setTime }}</view>
        </view>
      </view>
      <view class="logOut" @click="logOutKnow">
        退出登录
      </view>
    </view>
	</view>
</template>

<script>
  import { timestampToDatetime } from '@/untils/index';
  import request from '@/request/api';
	export default {
    filters: {
      setTime(val){
        return timestampToDatetime(val)
      },
      setPhone(val){
        if (!val) return ''
        val = val.toString()
        return `${val.substring(0,3)}****${val.substring(7)}`
      }
		},
		data() {
			return {
				messageObj:{}
			}
		},
    components: {
      
		},
		onLoad() {
      this.getMessageStorage()
		},
		methods: {
      getMessageStorage(){
        let token = uni.getStorageSync('userMessage')
        this.messageObj = JSON.parse(token)
      },
      logOutKnow(){
        let options = {
          url: '/user/logOut',
          method: 'GET',
        }
        request(options).then(res => {
          if (res.code === '200') {
            uni.clearStorageSync();
            uni.redirectTo({
              url:'./../index/login'
            })
          } 
        })
      }
		}
	}
</script>

<style lang="scss">
.mine {
  height: auto;
  width: 100%;
}
.titleMine {
  width: 98%;
  height: 150rpx;
  padding: 0 1%;
  display: flex;
  line-height: 150rpx;
  background-image: linear-gradient(to right, #a4a5ee 40%, #cfcfe8);
  color: #fff;
}
.avatar {
  height: 150rpx;
  width: 150rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  #isMyImage {
    width: 100%;
    height: 100%;
  }
}
.outSideBox {
  width: 100%;
  margin-top: 40rpx;
  .name,.gender,.information {
    width: 92%;
    height: 100rpx;
    line-height: 100rpx;
    margin: 10rpx 0;
    padding: 0 4%;
    border-bottom: 1rpx solid #979797;
    display: flex;
    :nth-child(2) {
      margin-left: 10rpx;
    }
  }
}

.logOut {
  position: absolute;
  bottom: 100rpx;
  height: auto;
  text-align: center;
  padding: 20rpx 0;
  right: 50%;
  color: #fff;
  width: 200rpx;
  transform: translate(105rpx);
  background-image: linear-gradient(to right, #a4a5ee 40%, #cfcfe8);
}
</style>
